<template>
	<div>
		<el-button-group>
			<el-button type="plain" size="small" @click="$_saveData">保存</el-button>
			<el-button type="plain" size="small" @click="$_zoomIn">放大</el-button>
			<el-button type="plain" size="small" @click="$_zoomOut">缩小</el-button>
			<el-button type="plain" size="small" @click="$_zoomReset">大小适应</el-button>
			<el-button type="plain" size="small" @click="$_translateRest">定位还原</el-button>
			<el-button type="plain" size="small" @click="$_reset">还原(大小&定位)</el-button>
			<el-button type="plain" size="small" @click="$_undo" :disabled="undoDisable">上一步(ctrl+z)</el-button>
			<el-button type="plain" size="small" @click="$_redo" :disabled="redoDisable">下一步(ctrl+y)</el-button>
		</el-button-group>
	</div>
</template>
<script setup>
import {ref, onMounted} from 'vue'

const props = defineProps({
	lf: Object || String,
	catTurboData: Boolean
})
const undoDisable = ref(true)
const redoDisable = ref(true)
const graphData = ref(null)
const dataVisible = ref(false)

onMounted(() => {
	const {lf} = props
	lf.on('history:change', ({data: {undoAble, redoAble}}) => {
		undoDisable.value = !undoAble
		redoDisable.value = !redoAble
	});
})
const $_saveData = () => {
	const {lf} = props
	console.log(lf.getGraphData());
	console.log("保存数据")
}

const $_zoomIn = () => {
	const {lf} = props
	lf.zoom(true);
}
const $_zoomOut = () => {
	const {lf} = props
	lf.zoom(false);
}
const $_zoomReset = () => {
	const {lf} = props
	lf.resetZoom();
}
const $_translateRest = () => {
	const {lf} = props
	lf.resetTranslate();
}
const $_reset = () => {
	const {lf} = props
	lf.resetZoom();
	lf.resetTranslate();
}
const $_undo = () => {
	const {lf} = props
	lf.undo();
}
const $_redo = () => {
	const {lf} = props
	lf.redo();
}
</script>
<style scoped>
</style>
